<template>
	<view class="nav">
		<!-- // 占位 状态栏 -->
		<view :style="'height:'+ statusHeight + 'px;' + containerStyle "></view>
		<view class="headNav" v-if="isHome"  :style="'height:' + navHeight + 'px;line-height:' + navHeight + 'rpx;padding-left:20px'">
			<view class="left">
				<text class="city">中部地区</text>
				<uni-icons type="right" size="20"></uni-icons>
			</view>
			<view class="search-content" :style="'margin-right:' + searchRight + 'px'">
				<u-search placeholder="请输入搜索内容"  :searchIconSize="40" :showAction="false"></u-search>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:' + navHeight + 'px;' + containerStyle">
			<view class="back-icon" @tap="handleToBack">
				<uni-icons v-if="pages > 1" type="left" size="30"></uni-icons>
				<uni-icons v-else type="home" size="30"></uni-icons>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'px;line-height:' + navHeight + 'px;' + textStyle">
					{{  titleText }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	let props = defineProps({
		background: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		color: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type: Number,
			default: 32
		},
		iconWidth: {
			type: Number,
			default: 116
		},
		iconHeight: {
			type: Number,
			default: 38
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	const containerStyle = ref('')
	const textStyle = ref('')
	const iconStyle = ref('')
	const statusHeight = ref(0)
	const navHeight = ref(0)
	const pages = ref(0)
	const menuButtonHeight = ref(0)
	const menuReactive = ref(null)
	const searchRight = ref(0)
	const getNavInfo = () => {
		const {
			statusBarHeight,
			system
		} = uni.getSystemInfoSync()
		statusHeight.value = statusBarHeight;
	}
	const setStyle = () => {
		containerStyle.value = 'background:' + props.background
		textStyle.value = 'color:' + props.color + ';' + 'font-size:' + props.fontSize + 'rpx;'
		iconStyle.value = 'width:' + props.iconWidth + 'rpx;' + 'height:' + props.iconHeight + 'rpx;'
	}
	const getCurrentPageList = () => {
		pages.value = getCurrentPages().length || 0
	}
	const handleToBack = () => {
		if(pages.value > 1){
			uni.navigateBack()
		} else {
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
	const getMenuButton = () => {
		if(uni.getMenuButtonBoundingClientRect) {
			let menu = uni.getMenuButtonBoundingClientRect()
			let  { top, height,left,width,right } = menu
			console.log(width,right,left);
			searchRight.value = width + 15;
			menuReactive.value = menu
			navHeight.value = height + (top - statusHeight.value) * 2
		} else{
			navHeight.value = 50
		}
		  
	}
	getNavInfo()
	getMenuButton()
	setStyle()
	getCurrentPageList()
</script>

<style lang="scss">
	.nav {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 2;
		background: #ffffff;
		.headNav {
			display: flex;
			align-items: center;
			.left {
				width: 90px;
			}
			.search-content {
				flex: 1;
			}
		}
		.navbar {
			display: flex;
			align-items: center;
			position: relative;
			.back-icon {
				display: flex;
				align-items: center;
				width: 64rpx;
				height: 64rpx;
				margin-left: 20rpx;
			}
			.nav-title {
				position: absolute;
				left: 50%;
				top: 0;
				transform: translate(-50%);
			}
		}
		
	}
</style>